<%-- 
    Document   : bigpicture
    Created on : 2019-11-20, 22:04:57
    Author     : dusin
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>大屏展示</title>
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery.easyui.min.js"></script>

        <script  language="JavaScript">
            var width;
            var height;
            var gridWidth;
            var gridHeight;
            var flag = 1;
            var count = 0;
            var divs = [];
            var pics = [["头Z-TSSG-20191121-084052-012.jpg", "货Z-TSSG-20191121-084052-012.jpg", "证Z-TSSG-20191121-084052-012.jpg", "单Z-TSSG-20191121-084052-012.jpg"],
                ["头Z-TSSG-20191121-081444-012.jpg", "货Z-TSSG-20191121-081444-012.jpg", "证Z-TSSG-20191121-081444-012.jpg", "单Z-TSSG-20191121-081444-012.jpg"],
                ["头Z-DYHT-20191120-135634-003.jpg", "货Z-DYHT-20191120-135634-003.jpg", "证Z-DYHT-20191120-135634-003.jpg", "单Z-DYHT-20191120-135634-003.jpg"],
                ["头Z-TSSG-20191121-081727-013.jpg", "货Z-TSSG-20191121-081727-013.jpg", "证Z-TSSG-20191121-081727-013.jpg", "单Z-TSSG-20191121-081727-013.jpg"]];
            var data = [["车牌：苏L23456", "客户：达力普石油专用管有限公司", "货物：08铝压块", "净重：123.2345吨"],
                ["车牌：皖A34532", "客户：德龙钢铁有限公司", "货物：彩瓦大压块", "净重：34.7787吨"],
                ["车牌：鲁QA938B", "客户：东营宏泰纸业有限公司", "货物：报纸", "净重：89.323吨"],
                ["车牌：冀B8935T", "客户：内蒙古大兴安岭浆纸有限责任公司", "货物：书页纸", "净重：19.4323吨"]]

            function updateData(pic, d) { //alert($('#g11')) 
                pic = pics[count % 4];
                d = data[count % 4];

                
                for (var i = divs.length; i > 0; i--) {
                    divs[i - 1].animate({top: (i * gridHeight) + 'px'});
                }
//删除最后一行
                if (divs[3]) {
                    divs[3].remove();
                    divs.pop();
                }

                var div = $("<div></div>");
                div.attr("id", "d" + count);
                div.css("border", "1px solid red").css("width", width + "px")
                        .css("height", gridHeight).css("top", "0px").css("position", "absolute");
                for (var i = 0; i < 4; i++) {
                    var image1 = $("<img></img>");
                    image1.css("width", gridWidth + "px").css("height", gridHeight + "px")
                            .css("padding", "2px");
                    image1.attr("src", "../../photo/" + pic[i]);
                    div.append(image1);
                }
                var divDesc = $("<div></div>");
                divDesc.css("width", gridWidth + "px").css("height", gridHeight + "px")
                        .css("padding", "2px").css("top", "0px")
                        .css("left", gridWidth * 4 + 'px').css("position", "absolute")
                        .css("background-color", "white");
                var $factoryName = $("<span ></span>");
                $factoryName.text(d[0])
                var $plateNo = $("<span></span>");
                $plateNo.text(d[1])
                var $productName = $("<span></span>");
                $productName.text(d[2]);
                var $netWeight = $("<span></span>");
                $netWeight.text(d[3]);
                divDesc.append($factoryName).append("<br/>");
                divDesc.append($plateNo).append("<br/>");
                divDesc.append($productName).append("<br/>");
                divDesc.append($netWeight).append("<br/>");
                div.append(divDesc);
                divs.unshift(div);
                $("body").prepend(div);

                count++;
            }
            $(document).ready(function() {

                width = $(document).width();
                height = $(document).height();
                gridWidth = Math.floor(width / 5);
                gridHeight = Math.floor(height / 4);
                updateData();
                var timer = setInterval(updateData, 5000);
            });
        </script>
    </head>
    <body style="width:100%;height:100%;background: url(../../img/bg.jpg) no-repeat
          ;background-size: cover">

    </body>
</html>
